<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!--移动端的兼容-->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>行价</title>
    <!--公共的css样式-->
    <link rel="stylesheet" type="text/css" href="../common_css/jquery-weui.css" />
    <link rel="stylesheet" type="text/css" href="../common_css/weui.css" />
    <link rel="stylesheet" type="text/css" href="../common_css/common.css" />
    <link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
    <!--点击弹出框的样式-->
    <link rel="stylesheet" type="text/css" href="../common_css/onclick_pop_view.css" />
    <script src="../common_js/common_font.js"></script>
    <!--本页的样式-->
    <style type="text/css">
        .jushengou_zhongjian {
            width: 80px;
            height: 40px;
            margin: auto;
        }
        /*放适量图标的箭头div*/
        
        #jushengoufont {
            width: 60px;
            height: 20px;
            line-height: 20px;
            float: left;
            /*border: 1px solid red;*/
            margin-top: 10px;
        }
        
        #jushengoufont img {
            width: 0.09rem;
            height: .2rem;
            vertical-align: middle;
        }
        /*等待上架里边的朝上朝下箭头*/
        
        #jushengou {
            /*border: 1px solid red;*/
            width: 20px;
            height: 20px;
            float: left;
            margin-left: -5px;
            margin-top: 12px;
            color: #F5F5F5;
        }
        /*适量图标上下箭头*/
        
        #jushengou p {
            width: 20px;
            height: 10px;
            text-align: center;
            line-height: 10px;
            /*border: 1px solid blue;*/
        }
        
        .icon-myless {
            font-size: 6px;
            color: #323232;
        }
        
        .icon-myxiala {
            font-size: 6px;
            color: #323232;
        }
        /*//新行价*/
        
        #newprice_time {
            border: 1px solid red;
            width: 20px;
            height: 40px;
            float: right;
        }
        
        #newprice_time p {
            width: 20px;
            height: 15px;
            text-align: center;
            line-height: 30px;
        }
        /*<!--总部div-->*/
        
        #exchangeprice_main {
            width: 100%;
            height: 100%;
            min-width: 320px;
            /*border: 2px solid yellow;*/
            box-sizing: border-box;
            background-color: #FFFFFF;
            overflow: auto;
            position: relative;
        }
        /*<!--头部-->*/
        
        #exchangeprice_header {
            width: 100%;
            height: 50px;
            background-color: #1E5390;
            color: white;
            text-align: center;
            line-height: 50px;
            font-size: 18px;
            position: fixed;
            top: 0px;
            left: 0px;
            z-index: 1000;
        }
        /*身体的外部*/
        
        #exchangeprice_body {
            width: 99%;
            min-width: 320px;
            overflow: auto;
            margin: 0px auto;
            margin-bottom: 50px;
            margin-top: 50px;
            /*border: 5px solid red;*/
        }
        /*层的切换*/
        
        #tab .ul-meun {
            list-style-type: none;
            /*border: 1px solid red;*/
            width: 100%;
            height: 45px;
            background-color: white;
            /*font-size: 16px;*/
        }
        /*点击切换的每一个li*/
        
        #tab .ul-meun li {
            float: left;
            width: 25%;
            height: 45px;
            text-align: center;
            line-height: 45px;
            /*border: 1px solid blue;*/
            color: #CDCDCD;
            font-size: 14px;
        }
        /*//自定义的一个公共样式,方便调用*/
        
        .active {
            display: inline-block;
            height: 45px;
            border-bottom: 2px solid #416B9D;
            color: #416B9D;
            font-size: 14px;
            /*font-weight: bold;*/
        }
        /*每一个切换层的div的内容*/
        
        .divitem1 {
            width: 100%;
            display: none;
        }
        /*切换里边等待上架的内容*/
        
        .wait_body_content {
            margin-top: 10px;
            overflow: hidden;
            /*border: 2px solid yellow;*/
        }
        /*切换内容的头部*/
        
        .exchangeprice_wait_title {
            width: 95%;
            height: 40px;
            /*border: 1px solid blue;*/
            border-bottom: 1px solid #F5F5F5;
            font-size: 14px;
            margin: auto;
        }
        /*平均的四个div内容*/
        
        .exchangeprice_wait_title_1 {
            width: 25%;
            height: 40px;
            float: left;
            line-height: 40px;
            text-align: center;
            margin: 0px auto;
            font-size: 14px;
            padding-left: 5px;
            /*border: 1px solid red;*/
        }
        /*切换内容的身体*/
        
        .exchangeprice_wait_body {
            width: 100%;
            overflow: hidden;
            border: 3px solid green;
        }
        /*//头像和姓名,工号*/
        
        .wait_title_1_img {
            width: 40px;
            height: 45px;
            /*border: 1px solid blue;*/
            display: -webkit-box;
        }
        /*头象*/
        
        .wait_title_1_img img {
            width: 40px;
            height: 40px;
            border-radius: 40px;
        }
        /*姓名*/
        
        .wait_title_1_name {
            height: 45px;
            /*border: 1px solid green;*/
            display: -webkit-box;
            -webkit-box-flex: 1;
            font-size: 14px;
            -webkit-box-orient: vertical;
        }
        /*切换的每一个身体里的内容*/
        
        .exchangeprice_wait_title_2 {
            width: 25%;
            height: 45px;
            float: left;
            /*设置盒子内的内容水平居中*/
            -webkit-box-pack: center;
            /*border: 1px solid red;*/
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
        
        .title_2_num {
            line-height: 45px;
        }
        
        .wait_title_1_name_nicheng {
            margin-top: 5px;
            color: #4E4E4E;
            border: 1px solid red;
        }
        
        .wait_title_1_name_num {
            margin-top: -5px;
            color: #D8D8D8;
        }
        /*关注*/
        
        .wait_title_2_concern {
            display: inline-block;
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: white;
            background-color: #FF0000;
            border-radius: 10px;
            font-size: 12px;
            margin-top: 10px;
        }
        
        .title_2_day {
            margin-top: 5px;
            color: #808080;
            font-size: 12px;
        }
        
        .title_2_time {
            margin-top: -5px;
            color: #808080;
            font-size: 12px;
        }
        /*单价*/
        
        .title_1_unitprice {
            font-size: 12px;
            color: #E6E6EA;
        }
        /*底部*/
        
        .exchangeprice_footer {
            position: fixed;
            bottom: 0px;
        }
        
        #hangjia_appointment {
            width: 100%;
            min-width: 320px;
            /*border: 1px solid;*/
            box-sizing: border-box;
            overflow: auto;
        }
        
        .hangjia_yuyuebang {
            width: 90%;
            /*border: 1px solid red;*/
            border-bottom: 2px solid #F7F7F7;
            margin: auto;
        }
        
        .hangjia_yuyuebang_shang {
            width: 100%;
            height: 50px;
            line-height: 50px;
            /*border: 1px solid green;*/
        }
        
        .hangjia_yuyuebang_shang_left {
            height: 50px;
            float: left;
            /*border: 1px solid yellow;*/
            line-height: 50px;
        }
        
        .hangjia_yuyuebang_shang_left font {
            font-size: 14px;
            font-family: "PingFangSC-Regular";
            /*font-family: "微软雅黑";*/
            /*font-weight: bold;*/
        }
        
        .hangjia_yuyuebang_shang_left span img {
            width: 16px;
            height: 16px;
            vertical-align: middle;
            margin-top: -3px;
        }
        
        .hangjia_yuyuebang_shang_right {
            height: 50px;
            float: right;
            /*border: 1px solid yellow;*/
            line-height: 50px;
            /*font-family: "微软雅黑";*/
            font-family: "PingFangSC-Regular";
            color: #323232;
        }
        
        .hangjia_yuyuebang_shang_right_1 {
            height: 50px;
            float: right;
            /*border: 1px solid yellow;*/
            line-height: 40px;
            /*font-family: "微软雅黑";*/
            font-family: "PingFangSC-Regular";
            color: #323232;
        }
        
        .hangjia_yuyuebang_shang_right span:first-child {
            width: 26px;
            height: 15px;
            display: inline-block;
            /*border: 1px solid red;*/
            line-height: 15px;
            margin-top: -6px;
            font-size: 13px;
            font-family: "PingFangSC-Regular";
            color: #323232;
            opacity: 0.67;
        }
        
        .hangjia_yuyuebang_shang_right span:last-child {
            margin-right: -4px;
        }
        
        .icon-mymore {
            color: #323232;
            font-size: 14px;
        }
        
        .hangjia_yuyuebang_zhong {
            width: 100%;
            height: 50px;
            /*border: 1px solid green;*/
        }
        
        .hangjia_yuyuebang_shang_left_1 {
            height: 50px;
            float: left;
            /*border: 1px solid yellow;*/
        }
        /*头像*/
        
        .yuyuebang_shang_left_img {
            float: left;
        }
        
        .yuyuebang_shang_left_img img {
            width: 40px;
            height: 40px;
            border-radius: 40px;
            margin: 0px 5px 0px 0px;
        }
        
        .hangjia_yuyuebang_xia {
            width: 100%;
            height: 50px;
            line-height: 50px;
            /*border: 1px solid green;*/
            text-align: center;
            font-size: 14px;
        }
        
        .hangjia_yuyuebang_xia span {
            color: #FE0000;
            font-size: 14px;
            letter-spacing: 2px;
        }
        /*name和num*/
        
        .yuyuebang_shang_left_num {
            float: left;
            /*border: 1px solid red;*/
        }
        
        .yuyuebang_shang_left_num p {
            margin: 0px;
            padding: 0px;
        }
        
        .yuyuebang_shang_left_num p img {
            width: 16px;
            height: 16px;
            vertical-align: middle;
            margin-top: -4px;
        }
        
        .yuyuebang_shang_left_num_1 {
            font-size: 14px;
            /*font-family: '微软雅黑';*/
            color: #323232;
            /*opacity: 0.9;*/
        }
        
        .yuyuebang_shang_left_num_1 img {
            margin-left: 3px;
        }
        
        .yuyuebang_shang_left_num_2 {
            opacity: 0.5;
            font-family: "PingFangSC-Regular";
            font-size: 12px;
            color: #323232;
            letter-spacing: 0.57px;
        }
        /*等待上架的样式*/
        
        #exchangeprice_body_new {
            width: 100%;
            /*border: 1px solid red;*/
            display: -webkit-box;
            margin-top: 10px;
        }
        /*头像和名字的样式*/
        
        .exchangeprice_body_new_1 {
            height: 50px;
            /*border: 1px solid blue;*/
            /*float: left;*/
            padding-left: 10px;
            display: -webkit-box;
            -webkit-box-flex: 1;
        }
        /*每一个里边的头像*/
        
        .exchangeprice_body_new_1_left {
            width: 40px;
            height: 40px;
            /*border: 1px solid green;*/
            margin-top: 5px;
        }
        
        .exchangeprice_body_new_1_left img {
            width: 40px;
            height: 40px;
            border-radius: 40px;
        }
        /*每一个里边的名字和代号*/
        
        .exchangeprice_body_new_1_right {
            width: 70px;
            height: 40px;
            /*border: 1px solid red;*/
            margin: 5px 0px 0px 7px;
        }
        
        .body_new_1_right_name {
            font-family: "PingFangSC-Regular";
            font-size: 13px;
            color: #323232;
            letter-spacing: 0.71px;
            margin-top: 3px;
        }
        
        .body_new_1_right_num {
            opacity: 0.6;
            font-size: 12px;
            color: rgba(50, 50, 50, 0.50);
            letter-spacing: 0.57px;
            font-family: "PingFangSC-Regular";
            margin-top: -5px;
        }
        /*11天和时的样式*/
        
        .exchangeprice_body_new_2 {
            height: 50px;
            /*border: 1px solid blue;*/
            /*float: left;*/
            display: -webkit-box;
            -webkit-box-flex: 2;
        }
        
        .exchangeprice_body_new_2 div {
            width: 70px;
            height: 40px;
            margin: auto;
            margin-top: 5px;
            /*border: 1px solid yellow;*/
        }
        
        .exchangeprice_body_new_2 div p {
            font-family: "PingFangSC-Regular";
            font-size: 14px;
            color: rgba(50, 50, 50, 0.80);
            letter-spacing: 0.75px;
            text-align: center;
        }
        
        .exchangeprice_body_new_2_p2 {
            margin-top: -5px;
        }
        /*关注样式*/
        
        .exchangeprice_body_new_3 {
            height: 50px;
            /*border: 1px solid blue;*/
            /*float: left;*/
            display: -webkit-box;
            -webkit-box-flex: 1;
        }
        
        .exchangeprice_body_new_3 div {
            width: 70px;
            height: 27px;
            margin: 5px auto;
            margin-top: 10px;
            line-height: 27px;
            text-align: center;
            background-color: #FF0000;
            font-family: "PingFangSC-Regular";
            font-size: 14px;
            color: #FFFFFF;
            letter-spacing: 0.75px;
            border-radius: 5px;
            /*margin-right: 12px;*/
        }
        /*暂无自选的内容*/
        
        #none_self_choose {
            width: 100%;
            height: 260px;
            /*border: 1px solid red;*/
        }
        /*点击添加的那个加号*/
        
        #none_self_choose_add {
            width: 96px;
            height: 96px;
            /*border: 1px solid green;*/
            margin: auto;
            margin-top: 120px;
            border-radius: 5px;
        }
        
        #none_self_choose_add img {
            width: 96px;
            height: 96px;
            border-radius: 5px;
        }
        /*暂无发行人，点击添加*/
        
        #none_self_choose_click {
            width: 145px;
            height: 20px;
            /*border: 1px solid blue;*/
            margin: auto;
            margin-top: 12px;
            line-height: 20px;
            font-family: "PingFangSC-Regular";
            font-size: 0.875em;
            color: rgba(50, 50, 50, 0.80);
            letter-spacing: 0.29px;
        }
        
        #investment_list_main {
            max-width: 100%;
            min-width: 3.2rem;
            height: 100%;
            background: #FFFFFF;
            position: relative;
        }
        
        .investment_list_content {
            padding: 0.1rem 0.1rem 0px 0.1rem;
            /*border: 1px solid red;*/
        }
        /*全部，预约数等文字显示*/
        
        .investment_list_fixed {
            width: 100%;
            height: .4rem;
            border-bottom: 1px solid #F5F5F5;
            margin-top: -0.1rem;
        }
        
        .investment_list_fixed,
        .investment_list_maincontent {
            width: 100%;
            font-size: .13rem;
            /*border: 1px solid green;*/
            display: -webkit-box;
            /*垂直居中*/
            -webkit-box-align: center;
        }
        
        .investment_list_maincontent {
            /*border: 1px solid green;*/
            margin-top: .2rem;
        }
        
        .investment_list_fixed>h3 {
            padding: .1rem 0;
        }
        /*内容显示样式结束*/
        
        .choose_way_self {
            font-family: "PingFangSC-Regular";
            font-size: .14rem;
            color: #323232;
            /*border: 1px solid blue;*/
        }
        
        .choose_way_self img {
            width: .09rem;
            height: .2rem;
            vertical-align: middle;
            /*margin-top: -0.3rem;*/
            /*margin-left: -0.3rem;*/
        }
        
        .investment_list_div2 {
            width: 20%;
            text-align: center;
            /*border: 1px solid yellow;*/
        }
        
        .investment_list_div3 {
            width: 35%;
            text-align: center;
        }
        
        .investment_list_fixed .investment_list_div3,
        .investment_list_fixed .investment_list_div4 {
            position: relative;
        }
        
        .investment_list_div4 {
            width: 20%;
            text-align: right;
        }
        
        .yuan {
            color: #C2C2C2;
            margin-left: 0.05rem;
            font-size: 10px;
        }
        /*上下箭头样式*/
        
        .i_top {
            width: .12rem;
            height: .16rem;
            /*border: 1px solid red;*/
            text-align: center;
            vertical-align: middle;
            display: inline-block;
        }
        
        .my-icon {
            color: #323232;
            font-size: .1rem;
            /*margin-left: 14px;*/
        }
        /*内容显示样式*/
        
        .investment_list_div1 {
            display: -webkit-box;
            width: 25%;
            /*垂直居中*/
            -webkit-box-align: center;
            /*border: 1px solid red;*/
            padding-left: 0.03rem;
        }
        
        .investment_list_tou_img {
            display: -webkit-box;
            width: 25%;
            /*垂直居中*/
            -webkit-box-align: center;
            /*border: 1px solid yellow;*/
        }
        /*头像*/
        
        .investment_list_headsculpture {
            width: .35rem;
            height: .35rem;
            border-radius: .17rem;
        }
        
        .investment_list_headsculpture>img {
            width: 100%;
            border-radius: .17rem;
        }
        /*头像结束


/*右边的名称开始*/
        
        .investment_list_right {
            margin-left: 0.05rem;
        }
        
        .investment_list_name {
            font-family: "PingFangSC-Regular";
            font-size: .13rem;
            color: #323232;
        }
        /*编号*/
        
        .investment_list_number {
            color: #D8D8D8;
            font-size: .12rem;
        }
        /*右边的名称结束*/
        
        .investment_list_number1 {
            font-family: " PingFangSC-Regular";
            font-size: .18rem;
            color: #FF0000;
            letter-spacing: 0.86px;
            /*border: 1px solid blue;*/
        }
        /*新行价的样式结束*/
        /*涨跌幅样式*/
        
        .investment_list_number2 {
            width: .7rem;
            height: .27rem;
            display: -webkit-box;
            /*垂直居中*/
            -webkit-box-align: center;
            /*水平居中*/
            -webkit-box-pack: center;
            background: #FF0000;
            border-radius: 5px;
            font-family: " PingFangSC-Regular";
            font-size: .14rem;
            color: #FFFFFF;
            margin-left: 0.06rem;
            letter-spacing: 0.75px;
        }
        /*涨跌幅样式结束*/
        /*颜色和按钮为绿色的样式*/
        
        .investment_list_green {
            color: #A0C570;
        }
        
        .investment_list_green2 {
            color: #BCEC7B;
            background: #79D01C;
        }
    </style>
</head>

<body>
    <!--总部div-->
    <div id="exchangeprice_main">
        <!--头部-->
        <div id="exchangeprice_header">
            行价
        </div>
        <!--身体-->
        <div id="exchangeprice_body">
            <!--点击切换层-->
            <div id="tab" class="j-tab">
                <ul class="ul-meun">
                    <li><span class="active">热门星人</span></li>
                    <li><span>自选</span></li>
                    <li><span>最新行价</span></li>
                    <li><span>等待上架</span></li>
                </ul>
                <p style="clear: both;"></p>
                <!--热门星人的内容-->
                <div class="divitem1" style="display: block; background-color: white;">
                    <div id="hangjia_appointment">
                        <!--预购榜-->
                        <div class="hangjia_yuyuebang">
                            <div class="hangjia_yuyuebang_shang">
                                <div class="hangjia_yuyuebang_shang_left">
                                    <span><img src="../commonimg/预购@2x.png"/></span>
                                    <font>预购榜</font>
                                </div>
                                <div class="hangjia_yuyuebang_shang_right">
                                    <span>更多</span><span class="iconfont icon-more icon-mymore"></span>
                                </div>
                            </div>
                            <div class="hangjia_yuyuebang_zhong" v-for="item in Preorderlist | limitBy 1" v-on:click="click_pop(this)">
                                <div class="hangjia_yuyuebang_shang_left_1">
                                    <!--头像-->
                                    <div class="yuyuebang_shang_left_img">
                                        <img :src="item.img" />
                                    </div>
                                    <!--姓名和编号-->
                                    <div class="yuyuebang_shang_left_num">
                                        <p class="yuyuebang_shang_left_num_1">
                                            <font v-html="item.name"></font><img src="../commonimg/预告@2x.png" /></p>
                                        <p class="yuyuebang_shang_left_num_2" v-html="item.publishtime"></p>
                                    </div>
                                </div>
                                <div class="hangjia_yuyuebang_shang_right_1" v-html="item.worth">
                                </div>
                            </div>
                            <div class="hangjia_yuyuebang_xia">
                                <span v-html='ptime.day'></span>天<span v-html='ptime.hour'></span>时<span v-html='ptime.min'></span>分<span v-html='ptime.second'></span>秒
                            </div>
                        </div>
                        <!--预约榜-->
                        <div class="hangjia_yuyuebang">
                            <!--行价预约榜上-->
                            <div class="hangjia_yuyuebang_shang">
                                <div class="hangjia_yuyuebang_shang_left">
                                    <span><img src="../commonimg/预约@2x.png"/></span>
                                    <font>预约榜</font>
                                </div>
                                <div class="hangjia_yuyuebang_shang_right">
                                    <span>更多</span><span class="iconfont icon-more icon-mymore"></span>
                                </div>
                            </div>
                            <!--行价预约榜中-->
                            <div class="hangjia_yuyuebang_zhong" v-for="item in reservation" v-on:click="click_pop(this)">
                                <div class="hangjia_yuyuebang_shang_left_1">
                                    <!--头像-->
                                    <div class="yuyuebang_shang_left_img">
                                        <img :src="item.img" />
                                    </div>
                                    <!--姓名和编号-->
                                    <div class="yuyuebang_shang_left_num">
                                        <p class="yuyuebang_shang_left_num_1" v-html="item.name"></p>
                                        <p class="yuyuebang_shang_left_num_2" v-html="item.publishtime"></p>
                                    </div>
                                </div>
                                <div class="hangjia_yuyuebang_shang_right_1" v-html="item.worth">
                                </div>
                            </div>
                        </div>
                        <!--买卖榜-->
                        <div class="hangjia_yuyuebang">
                            <div class="hangjia_yuyuebang_shang">
                                <div class="hangjia_yuyuebang_shang_left">
                                    <span><img src="img/买卖榜.png"/></span>
                                    <font>买卖榜</font>
                                </div>
                                <div class="hangjia_yuyuebang_shang_right">
                                    <span>更多</span><span class="iconfont icon-more icon-mymore"></span>
                                </div>
                            </div>
                            <div class="hangjia_yuyuebang_zhong" v-for='item in hotSell' v-on:click="click_pop(this)">
                                <div class="hangjia_yuyuebang_shang_left_1">
                                    <!--头像-->
                                    <div class="yuyuebang_shang_left_img">
                                        <img :src="item.img" />
                                    </div>
                                    <!--姓名和编号-->
                                    <div class="yuyuebang_shang_left_num">
                                        <p class="yuyuebang_shang_left_num_1" v-html='item.name'></p>
                                        <p class="yuyuebang_shang_left_num_2" v-html="item.sn"></p>
                                    </div>
                                </div>
                                <div class="hangjia_yuyuebang_shang_right_1" v-html='item.worth'>
                                </div>
                            </div>
                        </div>
                        <!--换手榜-->
                        <div class="hangjia_yuyuebang">
                            <div class="hangjia_yuyuebang_shang">
                                <div class="hangjia_yuyuebang_shang_left">
                                    <span><img src="img/换手榜.png"/></span>
                                    <font>换手榜</font>
                                </div>
                                <div class="hangjia_yuyuebang_shang_right">
                                    <span>更多</span><span class="iconfont icon-more icon-mymore"></span>
                                </div>
                            </div>
                            <div class="hangjia_yuyuebang_zhong" v-for="item in hotExchange" v-on:click="click_pop(this)">
                                <div class="hangjia_yuyuebang_shang_left_1">
                                    <!--头像-->
                                    <div class="yuyuebang_shang_left_img">
                                        <img :src="item.img" />
                                    </div>
                                    <!--姓名和编号-->
                                    <div class="yuyuebang_shang_left_num">
                                        <p class="yuyuebang_shang_left_num_1" v-html='item.name'></p>
                                        <p class="yuyuebang_shang_left_num_2" v-html="item.sn"></p>
                                    </div>
                                </div>
                                <div class="hangjia_yuyuebang_shang_right_1" v-html="item.worth">
                                </div>
                            </div>
                        </div>
                        <!--身价榜-->
                        <div class="hangjia_yuyuebang">
                            <div class="hangjia_yuyuebang_shang">
                                <div class="hangjia_yuyuebang_shang_left">
                                    <span><img src="img/身价榜.png"/></span>
                                    <font>身价榜</font>
                                </div>
                                <div class="hangjia_yuyuebang_shang_right">
                                    <span>更多</span><span class="iconfont icon-more icon-mymore"></span>
                                </div>
                            </div>
                            <div class="hangjia_yuyuebang_zhong" v-for="item in worthlist" v-on:click="click_pop(this)">
                                <div class="hangjia_yuyuebang_shang_left_1">
                                    <!--头像-->
                                    <div class="yuyuebang_shang_left_img">
                                        <img :src="item.img" />
                                    </div>
                                    <!--姓名和编号-->
                                    <div class="yuyuebang_shang_left_num">
                                        <p class="yuyuebang_shang_left_num_1" v-html="item.name"></p>
                                        <p class="yuyuebang_shang_left_num_2" v-html="item.sn"></p>
                                    </div>
                                </div>
                                <div v-html="item.worth" class="hangjia_yuyuebang_shang_right_1">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 自选的内容 -->
                <div class="divitem1">
                    <div id="none_self_choose">
                        <div id="none_self_choose_add">
                            <img src="img/添加@2x.png" />
                        </div>
                        <div id="none_self_choose_click">
                            暂无发行人，点击添加/
                        </div>
                    </div>
                    <!--主题内容-->
                    <!--主题内容-->
                    <div class="investment_list_content" style="display: none;">
                        <!--全部，预约数等文字显示-->
                        <div class="investment_list_fixed" style="border-bottom: 1px solid #F5F5F5; height: 50px;">
                            <div class="investment_list_div1 choose_way_self">全部</div>
                            <div class="investment_list_div2 choose_way_self">预约数</div>
                            <div class="investment_list_div3 choose_way_self">新行价<span class="yuan">元/小时</span><span> <img src="../commonimg/排序@2x.png"/></span>
                            </div>
                            <div class="investment_list_div4 choose_way_self">涨跌幅 <img src="../commonimg/排序@2x.png" />
                            </div>
                        </div>
                        <!--全部，预约数等文字显示结束-->
                        <!--单个内容显示-->
                        <div class="investment_list_maincontent" v-for="item in newStars">
                            <div class="inv investment_list_tou_img">
                                <!--头像-->
                                <div class="investment_list_headsculpture">
                                    <img :src="item.img" />
                                </div>
                                <!--头像结束-->
                                <!--右边名字显示-->
                                <div class="investment_list_right">
                                    <!--昵称-->
                                    <div class="investment_list_name" v-html='item.name'>雯雯</div>
                                    <!--昵称结束-->
                                    <!--编号-->
                                    <div class="investment_list_number" v-html="item.achievement">800001</div>
                                    <!--编号结束-->
                                </div>
                                <!--右边名字显示结束-->
                            </div>
                            <div class="investment_list_div2" style=" font-size: 16px; opacity: 0.67;">1234</div>
                            <div class="investment_list_div3 investment_list_number1" style="padding-left: 6px; width: 33%;">4068</div>
                            <p class="investment_list_div4 investment_list_number2">10.63%</p>
                        </div>
                        <!--单个内容显示结束-->
                    </div>
                    <!--主题内容结束->
                    </div>
                    <!-最新行价的内容-->
                    <div class="divitem1">
                        <!--主题内容-->
                        <div class="investment_list_content">
                            <!--全部，预约数等文字显示-->
                            <div class="investment_list_fixed" style="border-bottom: 1px solid #F5F5F5; height: 50px;">
                                <div class="investment_list_div1 choose_way_self">全部</div>
                                <div class="investment_list_div2 choose_way_self">预约数</div>
                                <div class="investment_list_div3 choose_way_self">新行价<span class="yuan">元/小时</span><span> <img src="../commonimg/排序@2x.png"/></span>
                                </div>
                                <div class="investment_list_div4 choose_way_self">涨跌幅 <img src="../commonimg/排序@2x.png" />
                                </div>
                            </div>
                            <!--全部，预约数等文字显示结束-->
                            <!--单个内容显示-->
                            <div class="investment_list_maincontent" v-for="item in newStars">
                                <div class="inv investment_list_tou_img">
                                    <!--头像-->
                                    <div class="investment_list_headsculpture">
                                        <img :src="item.img" />
                                    </div>
                                    <!--头像结束-->
                                    <!--右边名字显示-->
                                    <div class="investment_list_right">
                                        <!--昵称-->
                                        <div class="investment_list_name" v-html='item.name'>雯雯</div>
                                        <!--昵称结束-->
                                        <!--编号-->
                                        <div class="investment_list_number" v-html="item.achievement">800001</div>
                                        <!--编号结束-->
                                    </div>
                                    <!--右边名字显示结束-->
                                </div>
                                <div class="investment_list_div2" style=" font-size: 16px; opacity: 0.67;">1234</div>
                                <div class="investment_list_div3 investment_list_number1" style="padding-left: 6px; width: 33%;">4068</div>
                                <p class="investment_list_div4 investment_list_number2">10.63%</p>
                            </div>
                            <!--单个内容显示结束-->
                        </div>
                        <!----------------------------------------------主题内容结束--------------------------->
                        <!--最新行价的内容的结束div-->
                    </div>
                    <!--------------------------------------等待上架的内容----------------------------------------->
                    <div class="divitem1">
                        <!--切换内容的头部-->
                        <div class="exchangeprice_wait_title">
                            <div class="exchangeprice_wait_title_1" style="text-align: left;">全部</div>
                            <div class="exchangeprice_wait_title_1"></div>
                            <div class="exchangeprice_wait_title_1" style="text-align:left;">
                                <div class="jushengou_zhongjian">
                                    <div id="jushengoufont"> 距申购 <img src="../commonimg/排序@2x.png" /></div>
                                    <!--两个朝上朝下的箭头-->
                                    <div id="jushengou" style="display: none;">
                                        <p class="iconfont icon-less icon-myless" style="color: #323232; opacity: 0.76;"></p>
                                        <p class="iconfont icon-moreunfold icon-myxiala" style="color: #323232; opacity: 0.76;"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="exchangeprice_wait_title_1">涨跌幅</div>
                        </div>
                        <!--切换内容的身体-->
                        <div id="exchangeprice_body_new" v-for="item in waitShelves">
                            <div class="exchangeprice_body_new_1">
                                <div class="exchangeprice_body_new_1_left"><img :src="item.img" /></div>
                                <div class="exchangeprice_body_new_1_right">
                                    <p class="body_new_1_right_name" v-html='item.name'></p>
                                    <p class="body_new_1_right_num" v-html='item.sn'></p>
                                </div>
                            </div>
                            <div class="exchangeprice_body_new_2">
                                <div>
                                    <p class="exchangeprice_body_new_2_p1"><span v-html='watitime.day'></span>天</p>
                                    <p class="exchangeprice_body_new_2_p2"><span v-html="watitime.hour"></span>:<span v-html='watitime.min'></span>:<span v-html="watitime.second"></span></p>
                                </div>
                            </div>
                            <div class="exchangeprice_body_new_3">
                                <div>关注</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--身体底部div-->
            </div>
            <!--/*固定在底部的菜单栏*/-->
            <div class="weui-tabbar exchangeprice_footer" style="box-sizing: border-box;">
                <a href="../second_star/second_star.html" class="weui-tabbar__item ">
                    <div class="weui-tabbar__icon">
                        <img src="../commonimg/秒星@2x.png" alt="">
                    </div>
                    <p class="weui-tabbar__label">见到</p>
                </a>
                <a href="../exchangeprice/exchangeprice.html" class="weui-tabbar__item weui-bar__item--on">
                    <div class="weui-tabbar__icon">
                        <img src="../commonimg/行价 2@2x.png" alt="">
                    </div>
                    <p class="weui-tabbar__label">行价</p>
                </a>
                <a href="#" class="weui-tabbar__item" id="onclick_pop_view">
                    <div class="weui-tabbar__icon">
                        <img src="../commonimg/见到.png" alt="">
                    </div>
                    <p class="weui-tabbar__label">预约</p>
                </a>
                <a href="../secondtalk/secondtalk.html" class="weui-tabbar__item ">
                    <div class="weui-tabbar__icon">
                        <img src="../commonimg/秒说@2x.png" alt="">
                    </div>
                    <p class="weui-tabbar__label">秒说</p>
                </a>
                <a href="../myaccount/myaccount.html" class="weui-tabbar__item">
                    <div class="weui-tabbar__icon">
                        <img src="../commonimg/我的@2x.png" alt="">
                    </div>
                    <p class="weui-tabbar__label">我的</p>
                </a>
            </div>
            <!-----最外测div结束-------->
        </div>
        <!--点击预约的弹窗最外测的div-->
        <div id="onclick_pop_main">
            <!--内边距20%的div-->
            <div id="onclick_pop_main_content">
                <!--内容的上半部分-->
                <div id="onclick_pop_main_content_on">
                    <!--logo部分-->
                    <div id="main_content_on_logo">
                        <img src="../commonimg/seelogo.png" />
                    </div>
                    <!--购买秒数－预约服务－投资增值-->
                    <div id="main_content_on_talk">
                        购买秒数－预约服务－投资增值
                    </div>
                </div>
                <!--内容的下半部分-->
                <div id="onclick_pop_main_content_up">
                    <!--预约名人-购买转让-->
                    <div id="main_content_up_starpeople">
                        <!--预约名人-->
                        <div id="main_content_up_starpeople_left">
                            <!--logo-->
                            <div id="up_starpeople_left_logo"><img src="../commonimg/预约名人.png" /></div>
                            <!--预约名人-->
                            <div id="up_starpeople_left_logo_talk">预约名人</div>
                        </div>
                        <!--购买转让-->
                        <div id="main_content_up_starpeople_right">
                            <!--logo-->
                            <div id="up_starpeople_right_logo"><img src="../commonimg/购买转让.png" /></div>
                            <!--购买转让-->
                            <div id="up_starpeople_right_logo_talk">购买转让</div>
                        </div>
                    </div>
                    <!--最下边的关闭按钮-->
                    <div id="pop_close">
                        <div id="pop_close_img">
                            <img src="../commonimg/关闭@2x.png" />
                        </div>
                    </div>
                </div>
            </div>
            <!--点击预约的弹窗最外测的结束div-->
        </div>
        <!--这两个注释中间的是结束的div-->
        <script src="../common_js/jquery-1.11.0.min.js"></script>
        <script src="../common_js/mycomponents.js"></script>
        <script src="../common_js/onclick_pop_view.js"></script>
        <script src='../common_js/vue.js'></script>
        <script src='../common_js/vue-resource.min.js'></script>
        <script>
            new Vue({
                el: "body",
                data: {
                    //预约榜
                    reservation: [],
                    //预购榜
                    Preorderlist: [],
                    //身价榜
                    worthlist: [],
                    //换手榜
                    hotExchange: [],
                    //买卖榜
                    hotSell: [],
                    //存放时间
                    ptime: [],
                    //等待上架
                    waitShelves: [],
                    //等待上架
                    watitime: [],
                    //最新行价
                    newStars: []
                },
                //
                ready: function() {
                    var vm = this;
                    //预约榜
                    vm.getresource('http://119.23.224.92/jiandao/starInfo/hotCharts', vm.getreservation)

                    //预购榜
                    vm.getresource('http://119.23.224.92/jiandao/starInfo/hotBuy', vm.getPreorderlist)

                    //身价榜
                    vm.getresource('http://119.23.224.92/jiandao/starInfo/hotWorth', vm.getworthlist)

                    //换手榜
                    vm.getresource('http://119.23.224.92/jiandao/starInfo/hotExchange', vm.gethotExchange)

                    //买卖榜
                    vm.getresource('http://119.23.224.92/jiandao/starInfo/hotSell', vm.gethotSell)

                    //等待上架
                    vm.getresource('http://119.23.224.92/jiandao/starInfo/waitShelves', vm.getwaitShelves)

                    //最新行价
                    vm.getresource('http://119.23.224.92/jiandao/starInfo/waitShelves', vm.getnewStars)

                },
                methods: {
                    // 方法模板
                    // response是resours里返回的数据
                    // aims是对应榜单的data的空数组
                    getway: function(response, aims) {
                        var vm = this;
                        var ja = JSON.parse(response.data)
                        var star = ja.data
                        var aa = star.starList;
                        var at = [];
                        for (var i = 0; i < 1; i++) {
                            at.push(aa[i])
                        }
                        vm.$set(aims, at)

                        setTimeout(function() {
                            var time = vm.Preorderlist;
                            var timestart = time[0];
                            var time2 = vm.waitShelves;
                            var timestart2 = time2[0];
                            timest = timestart.publishtime;
                            vm.changtime(timest, 'ptime');
                            timest2 = timestart2.publishtime;
                            vm.changtime(timest2, 'watitime');

                        }, 0)

                    },
                    //resource模板
                    //url是请求地址
                    //method是相应榜单调用的方法，注意
                    //方法明前必须加vm
                    getresource: function(url, method) {
                        var vm = this
                        vm.$http.get(url, {
                            "way": "desc"
                        }).then(function(response) {
                            method(response);
                            console.log(response);
                        }, function(e) {
                            console.log(e)
                        })
                    },
                    changtime: function(timedata, dad) {
                        var vm = this;
                        //两个参数，第一个是要格式化的字符串，第二个是以什么分割符将年，月，日连接
                        (function timestamp2Time(timedata) {
                            var EndTime = new Date();
                            EndTime.setTime(timedata)
                            var NowTime = new Date();
                            var t = EndTime.getTime() - NowTime.getTime();

                            var d = Math.floor(t / 1000 / 60 / 60 / 24);
                            var h = Math.floor(t / 1000 / 60 / 60 % 24);
                            var m = Math.floor(t / 1000 / 60 % 60);
                            var s = Math.floor(t / 1000 % 60);
                            var ti = {
                                day: d,
                                hour: h,
                                min: m,
                                second: s
                            }

                            vm.$set(dad, ti)

                            setInterval(function() {
                                timestamp2Time(timedata)
                            }, 1000);
                        })(timedata)

                    },
                    // 获取预约榜
                    getreservation: function(response) {
                        this.getway(response, "reservation")
                    },
                    //获取预购榜
                    getPreorderlist: function(response) {
                        // var vm = this
                        this.getway(response, "Preorderlist")
                    },
                    //身价榜
                    getworthlist: function(response) {
                        this.getway(response, "worthlist")
                    },
                    //换手榜
                    gethotExchange: function(response) {
                        this.getway(response, "hotExchange")
                    },
                    //买卖榜
                    gethotSell: function(response) {
                        this.getway(response, "hotSell")
                    },
                    //等待上架
                    getwaitShelves: function(response) {

                        this.getway(response, "waitShelves")
                    },
                    //最新行价
                    getnewStars: function(response) {

                        this.getway(response, "newStars")
                    },
                    //                  点击每一个人的预约榜的内容的跳转
                    click_pop: function(t) {
                        console.log(t);
                        // 这是明星id
                        console.log(t.Preorderlist[0].id);
                        var ff = t.Preorderlist[0].id;
                        window.localStorage.setItem("super_id", ff);

                        // window.localStorage.setItem("super_id",t.Preorderlist[0].id);
                        // 这个是登陆时存到sessionstroge里边的id
                        var session_content = window.localStorage.getItem("userid");
                        console.log(JSON.parse(session_content));
                        var user__id = JSON.parse(session_content);
                        console.log(user__id.user_id);
                        location.href = "../detailpages_news/detailpages_news.html";
                    }

                }
            })
        </script>
        <script type="text/javascript">
            //          暂无发行人，点击添加的跳转
            $("#none_self_choose_add").on("click", function() {
                location.href = "../self_choose_add_search/self_choose_add.html";
            });
            //          点击每一个人的详情的时候的跳转
            //          function click_pop(t) {
            //              console.log(t);
            //              location.href = "../detailpages_news/detailpages_news.html?index="+t.getAttribute("id");
            //          };
        </script>
</body>

</html>